<template>
    <view class="page">
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="content">代码目录</block>
            <block slot="backText">返回</block>
        </cu-custom>
        <view v-if="codeLesson.length>0" class="cu-timeline">
            <view class="cu-item" :class="'text-'+itemColor(lesson)"
            v-for="(lesson, index) in codeLesson"
            :key="index"
            @click="clickCodeLesson(lesson)">
                <view class="content shadow-blur" :class="'bg-'+itemColor(lesson)">
                    {{lesson.title}}
                </view>
            </view>
        </view>
        <view class="hint" v-else>
            <view class="flex justify-center align-center">
             <text class="text-bold text-black">本章暂无编程代码</text>
            </view>
        </view>
    </view>
</template>

<script>
import {getChapterLesson, getCodeLesson} from './request.js';
export default {
    onLoad(options) {
        this.course_id = JSON.parse(options.course_id);
        this.chapter_id = JSON.parse(options.course_chapter_id);
        // console.log(this.course_id, this.chapter_id);
        getChapterLesson(this.course_id, this.chapter_id).then((res) => {
            // console.log(res);
            if(res) {
                this.codeLesson = getCodeLesson(res);
            }
        });
    },
    data() {
        return {
            course_id: 0,
            chapter_id: 0,
            codeLesson: []
        };
    },
    methods: {
        clickCodeLesson: function(lesson) {
            uni.navigateTo({
                url: '/pages/chapter/program/program' +
                    `?course_id=${this.course_id}&lesson=` + encodeURIComponent(JSON.stringify(lesson)),
            });
        },
        itemColor: function(lesson) {
            // 根据lesson的状态返回展示的颜色
            return (lesson.status == -1) ? 'red' : 'green';
        }
    }
};
</script>

<style scoped>
    .page{
        height: 100vh;
        width: 100vw;
        background-color: white;
    }

    .hint{
        height: 100%;
        width: 100%;
    }
</style>
